<template>
    <div>
        <div class="mg-content">




          <el-row :gutter="20">
            <el-col :span="7">

            </el-col>
                <el-col :span="5">
                  <el-input v-model="input" @keyup.enter.native="keyDown($event)" size="medium" placeholder="请输入单号"     class="w-100p" >
                    <template slot="prepend">
                      <el-button>单号</el-button>
                    </template>
                  </el-input>
                </el-col>

                <el-col :span="6">
                  <el-button class="btn-info" size="medium" icon="el-icon-search" @click="search(1)">搜索</el-button>
                  <el-button class="btn-warning" size="medium" style="margin-left: 1px"  icon="el-icon-refresh" @click="cleanSearch">重置</el-button>
                  <router-link to="/fullReductionStrategy/add" class="create_btn">
                    <el-button type="primary" size="medium" class="btn-primary"  icon="plus">新建&nbsp;</el-button>
                  </router-link>
                </el-col>
            </el-row>
             <br />

          <!--
           :row-class-name="getRowClassName"
                     :header-row-class-name="getTableHeaderClassName"-->
          <!-- :header-cell-style="{ height:'30px !important'}"-->
                <el-table

                     v-loading="loading"
                     :data="tableData"
                     :border="true"
                     :cell-class-name="getTableCellClassName"
                     :header-cell-class-name="getTableHeaderCellClassName"
                     size="small"
                     style="width: 100%">
                    <el-table-column
                       type="index"
                       width="50">
                     </el-table-column>
                    <el-table-column
                            label="编号">
                        <template scope="scope">
                            <span>{{scope.row.no}}</span>
                        </template>
                    </el-table-column>
                    <el-table-column
                            label="名称">
                        <template scope="scope">
                            <span>策略一</span>
                        </template>
                    </el-table-column>
                  <el-table-column
                    label="类型">
                    <template scope="scope">
                      <span>折扣</span>
                    </template>
                  </el-table-column>
                    <!--<el-table-column-->
                            <!--label="城市">-->
                        <!--<template scope="scope">-->
                            <!--<span>{{scope.row.cityName}}</span>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                    <!--<el-table-column-->
                            <!--label="区县">-->
                        <!--<template scope="scope">-->
                            <!--<span>{{scope.row.countyName}}</span>-->
                        <!--</template>-->
                    <!--</el-table-column>-->

                    <!--<el-table-column-->
                            <!--label="联系人">-->
                        <!--<template scope="scope">-->
                            <!--<span>{{scope.row.linker}}</span>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                    <!--<el-table-column-->
                            <!--label="手机">-->
                        <!--<template scope="scope">-->
                            <!--<span>{{scope.row.mobilePhone}}</span>-->
                        <!--</template>-->
                    <!--</el-table-column>-->
                   <el-table-column
                            label="状态">
                        <template scope="scope">
                            <span v-if="scope.row.state=='NORMAL'">正常</span>
                             <span v-else>禁用</span>
                        </template>
                    </el-table-column>

                    <el-table-column
                             label="操作">
                         <template scope="scope">
                             <router-link :to="'/cinemas/show?id='+scope.row.id">
                                <el-button type="text"  size="small">查看</el-button>
                            </router-link>
                             <router-link :to="'/cinemas/add?id='+scope.row.id">
                                <el-button type="text"  size="small">编辑</el-button>
                             </router-link>
                            <el-button type="text"  @click="handleDelete(scope.$index,scope.$index,scope.row.id)" size="small">删除</el-button>

                         </template>
                     </el-table-column>

                </el-table>
            <br>
            <div class="block">
                <el-row>
                    <el-col :span="24" class="text-right">
                       <el-pagination
                          :small="true"
                           @size-change="handleSizeChange"
                           @current-change="handleCurrentChange"
                           :current-page="currentPage"
                           :page-sizes="pageSizes"
                           :page-size="pageSize"
                           layout="total, sizes, prev, pager, next, jumper"
                           :total="total">
                       </el-pagination>
                    </el-col>
                </el-row>
            </div>
        </div>
        <PluginConfirm
                :show="dialogIsShow"
                @chooseSure="chooseSure()"
                @chooseCancel="chooseCancel()"
                @dialogResult="dialogResult">
        </PluginConfirm>
           <!--<chose-cinema :isShow="hallTypeShow" @getData='getCinemaData' @close='hallTypeShow=false'></chose-cinema>-->
    </div>
</template>
<script>
//    import choseCinema from '@/components/choseCinema.vue'
//    import ElRow from "element-ui/packages/row/src/row";
//    import ElCol from "element-ui/packages/col/src/col";
    //注意路径
    export default{
        data(){
            return {
                loading:false,
                tableData: [],
                pageSizes:window.pageSizes,//所有可选择的条数
                pageSize:window.pageSize,//控制一页显示的条数
                total:10,//总条数
                input:"",
                currentPage:1,
                inputValue:"",
                dialogIsShow:false,
                dialogIsShow:false,
                curDataRow:null,
                curDataIndex:0,
                selectItmeIndex:"",
                selectItemDetailsIndex:"",
                selectDelId:"",
                city:'',
                citys:[],
                countys:[],
                county:'',
                cityName:'',
                hallTypeShow:true,
                selectCinema:{
                  name:'请选择影院'
                }
            }
        },
         components: {
//           ElCol,
//           ElRow,
//           choseCinema
        },
        created(){
            window.this = this;
//             this.getCitys();
//            this.initData();

        },
      /*
      *  return "{
              height:'30px !important',
              background:'#ccc !important'
            }";*/
        methods: {
          getTableCellClassName(){
             return "table_cell_style";
            },
          getTableHeaderCellClassName(){
            return "table_header_cell_style";
          },
          getRowClassName(){
            return 'table_row_style'
          },
          getTableHeaderClassName(){
            return 'table_header_style';
          },
              getCinemaData(data){
               console.log(data);
               this.selectCinema=data;
               this.hallTypeShow=false;
               //发请求
            },
            initData(){
                this.currentPage=1;
                this.getData();
            },
            keyDown(ev){
                if(ev.keyCode==13) {
                    this.currentPage=1;
                    this.inputValue=this.input;
                    this.getData();
                }
            },
            cleanSearch(){
                this.currentPage=1;
                this.input="";
                this.inputValue=this.input;
                this.getData();
            },
            search(){
                this.currentPage=1;
                this.inputValue=this.input;
                this.getData();
            },
            handleCurrentChange(currentPage){
                this.currentPage=currentPage;
                this.getData();
            },
            getData(){
                this.loading=true;
                var se = '';
                if(this.city){
                    se += '&search.cityId_eq='+this.city;
                }
                if(this.county){
                    se += '&search.countyId_eq='+this.county;
                }
                this.$axios.get("cinemas/cinemas?page.pn="+this.currentPage+"&page.size="+this.pageSize+"&search.name_like,linker_like,mobilePhone_like="+this.inputValue+se).then((data)=>{
                    this.loading=false
                    this.tableData=data.content.content;
                    this.total=data.content.material.total
                }).catch(function(err){
                 })
            },
             handleDelete(index,delIndex,id) {
                 this.selectItmeIndex=index,
                 this.selectItemDetailsIndex=delIndex;
                 this.selectDelId=id;
                 this.dialogIsShow=true;
            },
            dialogResult(param){
                this.dialogIsShow=param.close;
                if(param.choose==="ok"){
                    //console.log("确定");
                    this.$axios.delete("cinemas/cinemas/"+this.selectDelId).then(data=>{
                        if(data.status==200){
                            this.tableData.splice(this.curDataIndex,1);
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.initData();
                        }else{
                            this.$message({
                                type: 'error',
                                message: data.message
                            });
                        }
                    })
                }else if(param.choose==="cancel"){
                    //console.log("取消");
                }else{
                    //console.log("不做处理");
                }
            },
            handleSizeChange(val){
                this.pageSize=val;
                this.getData();
            },
            getCitys() {
      var arr = [];
      //获取城市
      this.$axios
        .get("cinemas/cinemas/getCitys?name=")
        .then(data => {
          console.log(data);
          this.citys = data.content;
          console.log(this.citys);
        })
        .catch(function(err) {});
    },
    getCountys(e) {
      console.log(e);
      console.log(this.citys);
      var arr = this.citys.filter(function(item) {
        return item._id == e;
      });
      console.log(arr);
      if (arr && arr.length > 0 && this.cityName != arr[0].name) {
        this.county = "";
      }

      if (arr && arr.length > 0) {
        this.cityName = arr[0].name;
      }
    if(this.cityName){
    this.$axios
            .get("cinemas/cinemas/getCitys?name=" + this.cityName)
            .then(data => {
            console.log(data);
            this.countys = data.content;
            console.log("--------------------5555555555");
            console.log(this.countys);

            })
            .catch(function(err) {});
    }



    },
        }
    }
</script>
<style scoped>

</style>
